xqData()

function xqData() {
    let url = 'http://jx.xuzhixiang.top/ap/api/detail.php';
    let s = new URLSearchParams(location.search);
    let id = s.get("id")
    // console.log(id)
    ajax({
        method: "get",
        url: 'http://jx.xuzhixiang.top/ap/api/detail.php',
        params: {
            id
        },
        success(obj) {
            console.log(obj)
            console.log(obj.data.pimg)
            // let oP = document.querySelectorAll("p>img")          
            // oP[0].setAttribute('src',obj.data.pimg)
            // oP[0].src = obj.data.pimg
            let oP = document.querySelectorAll("p")
            let oPic = document.querySelectorAll(".oPic")
            oPic[0].src = obj.data.pimg
            oPic[1].src = obj.data.pimg
            oPic[2].src = obj.data.pimg
            oP[2].innerHTML = obj.data.pname
            oP[3].innerHTML = obj.data.pdesc
            oP[4].innerText = "￥" + obj.data.pprice



            //添加商品到购物车
            let oIput = document.querySelector(".tex")

            let oSpan = document.querySelectorAll("span")
            console.log(oSpan[0])
            //减法操作
            oSpan[0].onclick = function () {
                oIput.value--;
                if (oIput.value <= 0) {
                    oIput.value = 1
                }
            }
            //加法操作
            oSpan[1].onclick = function () {

                oIput.value++;
            }

            // 调添加商品到购物车的接口

            function addShop() {
                let oB = document.querySelector("b")
                console.log(oB)
                oB.onclick = function () {
                    console.log("a")
                    let url = "http://jx.xuzhixiang.top/ap/api/add-product.php"
                    let uid = localStorage.getItem("uid");
                    let p = new URLSearchParams(location.search);
                    let pid = p.get("id")

                    // axios.get(url, {
                    //     params: {
                    //         uid,
                    //         pid,
                    //         pnum: oIput.value
                    //     }
                    // }).then(data => {
                    //     console.log(data);
                    //     location.href = "shopCar.html"   

                    // })

                    ajax({
                        method: "get",
                        url: "http://jx.xuzhixiang.top/ap/api/add-product.php",
                        params: {
                            uid,
                            pid,
                            pnum: oIput.value
                        },
                        success(obj) {
                            console.log(obj)
                            location.href = "shopCar.html"
                        }


                    })

                }
            }

            addShop()

        }

    })

}


class Zoom {
    constructor() {
        this.zoomBOX = document.getElementById("zoomBox");
        this.midArea = document.getElementById("midArea");
        this.midImg =document.querySelector(".oPic")
        this.zoom = document.getElementById("zoom");
        this.bigBox = document.getElementById("bigBox");
        this.bigImg = this.bigBox.children[0];
        this.slt = document.getElementById("slt");
        this.smallImg = this.slt.children;
        this.init();
    }


    init() {
        this.midArea.onmouseover = () => {
            this.zoom.style.display = "block";
            this.bigBox.style.display = "block";

        }
        this.midArea.onmouseout = () => {
            this.zoom.style.display = "none";
            this.bigBox.style.display = "none";

        }
        this.midArea.onmousemove = (e) => {
            let evt = e || window.event;
            let x = evt.pageX - this.zoomBOX.offsetLeft - this.zoom.offsetWidth / 2;
            let y = evt.pageY - this.zoomBOX.offsetTop - this.zoom.offsetHeight / 2;

            let mx = this.midArea.offsetWidth - this.zoom.offsetWidth;
            let my = this.midArea.offsetHeight - this.zoom.offsetHeight;

            x = x <= 0 ? 0 : x >= mx ? mx : x;
            y = y <= 0 ? 0 : y >= my ? my : y;

            this.zoom.style.left = x + "px";
            this.zoom.style.top = y + "px";

            this.bigImg.style.left = -this.zoom.offsetLeft * (this.bigImg.offsetWidth / this.midArea.offsetWidth) + "px";
            this.bigImg.style.top = -this.zoom.offsetTop * (this.bigImg.offsetHeight / this.midArea.offsetHeight) + "px";


        }
        for (let i = 0; i < this.smallImg.length; i++) {
            this.smallImg[i].onmouseover = () => {
                $( this.smallImg[i]).css("border","6px solid red");
                this.midImg.src = this.smallImg[i].src;
                this.bigImg.src = this.smallImg[i].src;
            }
            this.smallImg[i].onmouseout = () => {
                $( this.smallImg[i]).css("border","1px solid #000");
               
            }
        }
    }
}

new Zoom()